<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    varying vec2 v_Pin;
    void main() {
        gl_Position = a_Position;
        v_Pin=a_Pin;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    uniform sampler2D u_Pattern;
    uniform float u_Ratio;
    varying vec2 v_Pin;
    void main() {
        vec4 o=texture2D(u_Sampler,v_Pin);
        vec4 p=texture2D(u_Pattern,v_Pin);
        gl_FragColor=mix(o,p,u_Ratio);
    }
</script>
<script type="module">
  import {initShaders} from './js/utils.js'
  import Poly from './js/poly02.js'
  import Track from './js/Track.js'

  const canvas = document.getElementById('canvas')
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const gl = canvas.getContext('webgl')
  const vertexShader = document.getElementById('vertexShader').innerText
  const fragmentShader = document.getElementById('fragmentShader').innerText

  initShaders(gl, vertexShader, fragmentShader)

  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  const source =[
    -0.4, 0.8, 0, 1,
    -0.4, -0.8, 0, 0.0,
    0.4, 0.8, 1.0, 1,
    0.4, -0.8, 1.0, 0.0,
  ];

  let n = 0
  let len = 5
  const obj = { ratio: 0 }
  let track = null

  const poly = new Poly({
    gl,
    source,
    type: 'TRIANGLE_STRIP',
    attributes: {
      a_Position: {
        size: 2,
        index: 0
      },
      a_Pin:{
        size: 2,
        index: 2
      }
    },
    uniforms: {
      u_Ratio: {
        type: 'uniform1f',
        value: obj.ratio
      }
    },
  })

  function loadImg() {
    n++;
    const i1 = n % len
    const i2 = (n + 1) % len

    const originImg = new Image()
    originImg.src = `./images/pattern${i1}.jpg`

    const pattern = new Image()
    pattern.src = `./images/pattern${i2}.jpg`

    Promise.all([
      imgPromise(originImg),
      imgPromise(pattern),
    ]).then(() => {
      changeImg(originImg, pattern)

      ani()
    })
  }

  loadImg()

  /* 动画 */
  function ani() {
    track.update(new Date())
    poly.uniforms.u_Ratio.value = obj.ratio;
    poly.updateUniform()
    render()
    requestAnimationFrame(ani)
  }

  //渲染
  function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    poly.draw()
  }

  function changeImg(...imgs){
    obj.ratio = 0

    poly.maps = {
      u_Sampler: { image: imgs[0] },
      u_Pattern: { image: imgs[1] },
    }

    poly.updateMaps()
    track = new Track(obj);
    track.start = new Date();
    track.timeLen = 1500;
    track.onEnd = loadImg
    track.keyMap = new Map([
      [
        "ratio",
        [
          [0, 0],
          [700, 1]
        ],
      ],
    ]);
  }

  function imgPromise(img){
    return new Promise((resolve)=>{
      img.onload=function(){
        resolve(img);
      }
    });
  }

</script>
</body>
</html>
